<template>
  <div class="department-container">
    <div class="header">部门管理</div>
    <div style="width: 90%; display: flex; flex-direction: row;">
      <!-- 查询 select 列表 -->
      <div class="select-column" style="width: 40%">
        <!-- 按钮组合 -->
        <div>
          <div style="width: 100%; height: 66px;">
            <el-button type="success" @click="deptSaveShow">添加</el-button>
            <el-button type="warning" @click="handleDept">修改</el-button>
            <el-button type="danger" @click="deptDelete">删除</el-button>
          </div>
        </div>
        <!-- 列表+修改 -->
        <div>
          <el-tree-select
            v-model="name"
            :data="tableData"
            :props="{ label: 'name', children: 'children', value: 'deptId' }"
            style="width: 240px"
            @change="getChildren(name)"
            :disabled="isDisabledSelect"
            check-strictly
            :render-after-expand="false"
          >
            <template #default="{ data: { name } }">
              {{ name }}
              <span style="color: gray"></span>
            </template>
          </el-tree-select>
          <el-divider />
        </div>
      </div>
      <!-- 展示和修改数据的地方 -->
      <div class="form-column" style="width: 40%">
        <el-form
          :model="dept"
          label-width="auto"
          style="max-width: 600px"
          v-if="dept != null"
        >
          <el-form-item label="部门 id">
            <el-input v-model="dept.deptId" disabled />
          </el-form-item>
          <el-form-item label="租户名称">
            <el-input v-model="dept.tenantName" disabled />
          </el-form-item>
          <el-form-item label="部门名称">
            <el-input v-model="dept.name" :disabled="isDisabled" />
          </el-form-item>
          <el-form-item label="所属一级部门" v-if="dept.parentId != 0">
            <!--          <el-input v-model="dept.parentId" :disabled="isDisabled"/>-->
            <el-select
              v-model="dept.parentId"
              size="large"
              style="width: 240px"
              :disabled="isDisabled"
            >
              <el-option
                v-for="item in deptParents1"
                :key="item.deptId"
                :label="item.name"
                :value="item.deptId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input v-model="dept.createTime" :disabled="isDisabled" />
          </el-form-item>
          <el-button type="primary" v-if="isSbt" @click="deptSubmit">
            提交
          </el-button>
        </el-form>
      </div>
    </div>
    <!-- 添加弹窗 -->
    <el-dialog v-model="dialogVisibleSave" title="添加 dept" width="500">
      <el-form
        v-model="deptSaveData"
        label-width="auto"
        style="max-width: 600px"
      >
        <el-form-item label="部门名称">
          <el-input v-model="deptSaveData.name" />
        </el-form-item>
        <el-form-item label="请选择所属租户">
          <el-select
            v-model="deptSaveData.tenantId"
            size="large"
            style="width: 240px"
            @change="handleTenant(deptSaveData.tenantId)"
            disabled=""
          >
            <el-option
              v-for="item in tenantList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="部门选择">
          <el-radio-group v-model="buMen" @change="radio1Change">
            <el-radio :value="1" label="一级部门" size="large" />
            <el-radio :value="2" label="二级部门" size="large" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="请选择所属部门" v-if="deptSaveDataParentId">
          <el-select
            v-model="deptSaveData.parentId"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in deptParents"
              :key="item.deptId"
              :label="item.name"
              :value="item.deptId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisibleSaveSbt()">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  deptById,
  deptByParentId,
  deptChildrenById,
  deptUpdate,
  deptDeleteByDeptId,
  deptSave,
  deptDelAll,
  deptByTenantId,
} from '@/api/dept'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { listTenant } from '@/api/tenant'
import { GetUserinfo } from '@/api/login'

const deptDto = ref({})
const tableData = ref([])
const name = ref()
const deptParents = ref([])
const deptParents1 = ref([])

// 查询租户所有 fu 的数据
const deptByParentIdShow = () => {
  try {
    deptByParentId(deptDto.value).then(res => {
      console.log(res.data)
      tableData.value = res.data
      deptParents1.value = res.data
    })
  } catch (error) {
    ElMessage.error('列表加载失败，请联系管理员')
  }
}
deptByParentIdShow()
const handleTenant = tenantId => {
  deptByTenantId(tenantId).then(res => {
    deptParents.value = res.data
    console.log(res.data)
  })
}
const tenantList = ref([])
const tenantFind = () => {
  listTenant().then(res => {
    console.log(res)
    tenantList.value = res.data
  })
}
tenantFind()
const dept = ref({})

// 根据 id 查询 dept 数据
function getChildren(id) {
  console.log(id)
  deptById(id).then(res => {
    console.log(res.data)
    dept.value = res.data
  })
}

const isDisabled = ref(true)
const isDisabledSelect = ref(false)
const isSbt = ref(false)
// 点击修改
const handleDept = () => {
  if (dept.value.deptId != null) {
    isDisabled.value = false
    isDisabledSelect.value = true
    isSbt.value = true
  } else {
    ElMessage.info('请先选择部门')
  }
}
// 提交修改的数据
const deptSubmit = () => {
  deptUpdate(dept.value).then(res => {
    console.log(res)
    if (res.code === 200) {
      alert('修改成功')
      isDisabled.value = true
      isDisabledSelect.value = false
      isSbt.value = false
      deptByParentIdShow()
      getChildren(dept.value.deptId)
    }
  })
}
// 删除 dept
const deptDelete = () => {
  if (dept.value.deptId != null) {
    if (dept.value.parentId != 0) {
      if (confirm('是否删除')) {
        console.log(dept.value)
        deptDeleteByDeptId(dept.value).then(res => {
          if (res.code === 200) {
            alert('删除成功')
            location.reload()
          }
        })
      }
    } else {
      if (confirm('这将会连着他的子部门也会删除，您确定删除吗？')) {
        deptDelAll(dept.value).then(res => {
          if (res.code === 200) {
            alert('删除成功')
            location.reload()
          }
        })
      }
    }
  } else {
    ElMessage.info('请先选择部门')
  }
}
const dialogVisibleSave = ref(false)
const deptSaveData = ref({
  name: null,
  parentId: null,
  tenantId: null,
})
const buMen = ref('一级部门')
const deptSaveDataParentId = ref(false)
const radio1Change = () => {
  console.log(buMen.value, '------')
  if (buMen.value === '一级部门') {
    deptSaveData.value.parentId = 0
    deptSaveDataParentId.value = false
  } else if (buMen.value === '二级部门') {
    deptSaveDataParentId.value = true
  }
}
// 添加 dept 展示
const deptSaveShow = () => {
  console.log(buMen.value)
  deptSaveData.value = {}
  GetUserinfo().then(res => {
    console.log(res)
    deptSaveData.value.tenantId = res.data.tenantId
    handleTenant(res.data.tenantId)
  })
  buMen.value = '一级部门'
  deptSaveDataParentId.value = false
  radio1Change()
  dialogVisibleSave.value = true
}
// 添加按钮
const dialogVisibleSaveSbt = () => {
  console.log(deptSaveData.value)
  if (deptSaveData.value.name != null) {
    deptSave(deptSaveData.value).then(res => {
      if (res.code === 200) {
        alert('添加成功')
        deptSaveData.value = {}
        dialogVisibleSave.value = false
        deptByParentIdShow()
      }
    })
  } else {
    alert('请完成添加信息')
  }
}
</script>

<style scoped>
.department-container {
  background-color: #f9f9f9;
  padding: 20px;
}

.header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #4caf50;
}

.button-group {
  display: flex;
  justify-content: space-between;
  background-color: #e8f5e9;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.select-column {
  background-color: #fff;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #c8e6c9;
}

.form-column {
  background-color: #fff;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #c8e6c9;
}

.dialog-footer {
  text-align: right;
}
</style>
